<template>
	<view class="logIn">
		<view class="bg"></view>
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="登录" :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='登录'></headBarAPP>
		<!-- #endif -->

		<view class="container">
			<view class="account-info">
				<view class="avatar">
					<image :src="userInfo_cloud.avatar_cloudPath" mode="aspectFill"></image>
				</view>
				<view class="account">
					<view class="text">账户：</view>
					<input placeholder="请输入账户" v-model="userInfo_input.account"
						@confirm="SearchCloudAccounts('input2')" />
				</view>
				<view class="password">
					<view class="text">密码：</view>
					<input placeholder="请输入密码" :focus="focus_password" v-model="userInfo_input.password"
						:password="hidden_password" @confirm="SurePassword()" auto-focus />
					<view class="iconfont eye" @tap="Hidden_password()">{{hidden_password?'&#xe62a;':'&#xe628;'}}</view>
					<view class="eye"></view>
				</view>
			</view>
			<view class="button-logIn" @tap="LogIn()">
				<view class="iconfont arrow">&#xe683;</view>
			</view>
			<view class="button-signIn" @tap="SignIn()">注册账号</view>
		</view>
	</view>
</template>

<script>
	// 导入云对象
	const userInfo = uniCloud.importObject('userInfo', {
		customUI: true // 取消自动展示的交互提示界面
	});
	export default {
		data() {
			return {
				// 信息
				userInfo_input: {
					account: "",
					password: '',
				},

				userInfo_cloud: {
					avatar_cloudPath: '',
				},

				// 标识变量
				hidden_password: true,
				focus_password: false,
			}
		},
		methods: {
			Hidden_password() {
				this.hidden_password = !this.hidden_password;
			},

			SignIn() {
				console.log("注册账号");
				uni.navigateTo({
					url: "/pages/personalPage/signIn/signIn"
				});
			},

			/** 确认登录
			 * 
			 */
			LogIn() {
				console.log('登录', this.userInfo_input);
				userInfo.LogIn(this.userInfo_input).then(res => {
					console.log(res);
					if (res.success) {
						let app = getApp();
						app.userInfo = res.userInfo;
						uni.switchTab({
							url: '/pages/personalPage/personalPage'
						});
					} else {
						uni.showModal({
							content: '密码错误',
						});
					}
				})
			},
			/**搜索云端账户
			 * 
			 */
			SearchCloudAccounts(refName) {
				console.log('搜索云端账户');

				userInfo.SearchCloudAccounts(this.userInfo_input.account).then(res => {
					console.log(res);
					this.userInfo_cloud = res;
				});

				// 聚焦到下一个输入框
				this.focus_password = true;
			},
			SurePassword() {
				console.log("输入密码");
				this.LogIn();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account-info {
		position: relative;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, 0.05);
		width: 600rpx;
		height: 400rpx;
		margin: auto;
		margin-top: 400rpx;
		border-radius: 40rpx;

		.avatar {
			position: absolute;
			width: 240rpx;
			height: 240rpx;
			border-radius: 50%;
			background-color: white;
			box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, 0.03);
			left: 50%;
			transform: translate(-50%, -50%);
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.password,
		.account {
			position: absolute;
			top: 180rpx;
			left: 40rpx;
			right: 40rpx;
			display: flex;
			font-size: $font-size-m-l;

			.text {
				width: 110rpx;
			}

			input {
				flex: 1;
				font-size: $font-size-m-l;
				border-bottom: 3rpx solid rgba(0, 0, 0, 0.3);
			}
		}

		.password {
			top: 280rpx;

			.eye {
				font-size: $icon-size-m-m;
				color: rgba(0, 0, 0, 0.5);
			}
		}
	}

	.button-logIn {
		width: 160rpx;
		height: 160rpx;
		background: linear-gradient(to right, #f02fc2, #6094ea);
		/* 线性渐变 */
		margin: auto;
		margin-top: 0rpx;
		border-radius: 50%;
		position: relative;

		.arrow {
			position: absolute;
			top: 14rpx;
			left: 26rpx;
			font-size: 120rpx;
			color: rgba(0, 0, 0, 0.5);
			opacity: 0.7;

		}
	}

	.button-signIn {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
		color: rgba(67, 113, 197, 0.8);
	}
</style>